@import 'tailwindcss';
@import 'tw-animate-css';
@import 'tailwind-scrollbar-hide/v4';

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";

@source '../**/*.{vue,ts,tsx,js,jsx}';
@source '../../shell/**/*.{vue,ts,tsx,js,jsx}';
@source '../../../shadcn/components/**/*.{vue,ts,tsx,js,jsx}';
@source '../../../../node_modules/markstream-vue/dist/tailwind.ts';

@custom-variant dark (&:where(.dark &, [data-theme='dark'] &));

@layer base {
  @import 'markstream-vue/index.tailwind.css';

  :root {
    --dc-font-scale: 1;
    --base-50: hsl(0 0% 100%);
    --base-100: hsl(0 0% 98.1%);
    --base-200: hsl(0 0% 93.4%);
    --base-300: hsl(0 0% 85.9%);
    --base-400: hsl(0 0% 67.1%);
    --base-500: hsl(0 0% 48.9%);
    --base-600: hsl(0 0% 36.5%);
    --base-700: hsl(0 0% 28.7%);
    --base-800: hsl(0 0% 19.5%);
    --base-900: hsl(0 0% 13.2%);
    --base-950: hsl(0 0% 12.2%);
    --base-1000: hsl(0 0% 1.2%);

    --primary-50: hsl(208.6 72.4% 94.3%);
    --primary-100: hsl(210 75.9% 88.6%);
    --primary-200: hsl(210 74.5% 80%);
    --primary-300: hsl(209.7 75.2% 71.6%);
    --primary-400: hsl(209.8 75.7% 62.9%);
    --primary-500: hsl(209.8 75.1% 54.3%);
    --primary-600: hsl(209.9 100% 42.9%);
    --primary-700: hsl(209.8 100% 34.3%);
    --primary-800: hsl(209.6 100% 27.8%);
    --primary-900: hsl(210 100% 21.6%);
    --primary-950: hsl(209.6 100% 15.1%);
    --primary-1000: hsl(210 100% 8.6%);

    --white: hsl(0 0% 100%);
    --black: hsl(0 0% 0%);

    --zinc-50: hsl(0 0% 98%);
    --zinc-100: hsl(240 4.8% 95.9%);
    --zinc-200: hsl(240 5.9% 90%);
    --zinc-300: hsl(240 4.9% 83.9%);
    --zinc-400: hsl(240 5.5% 64.3%);
    --zinc-500: hsl(240 4.2% 46.3%);
    --zinc-600: hsl(240 5.7% 34.1%);
    --zinc-700: hsl(240 5.3% 26.1%);
    --zinc-800: hsl(240 3.7% 15.9%);
    --zinc-900: hsl(240 5.9% 10%);
    --zinc-950: hsl(240 10% 3.9%);

    --container: var(--white);
    --background: var(--white);
    --foreground: hsl(0 0 15% / 1);
    --foreground: hsl(0 0 15% / 1);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0 15% / 1);
    --card-foreground: hsl(0 0 15% / 1);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0 15% / 1);
    --popover-foreground: hsl(0 0 15% / 1);
    --primary: hsl(210 100% 43%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(0 0 0% / 0.05);
    --secondary-foreground: hsl(0 0 15% / 0.5);
    --secondary: hsl(0 0 0% / 0.05);
    --secondary-foreground: hsl(0 0 15% / 0.5);
    --muted: hsl(0 0 0% / 0.03);
    --muted-foreground: hsl(0 0 15% / 0.5);
    --muted-foreground: hsl(0 0 15% / 0.5);
    --accent: hsl(0 0 15% / 0.05);
    --accent-foreground: hsl(0 0 15% / 0.8);
    --accent-foreground: hsl(0 0 15% / 0.8);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    /* --border: var(--base-200); */
    --input: var(--base-300);
    --ring: var(--primary-600);
    --chart-1: var(--primary-600);
    --chart-2: var(--primary-200);
    --chart-3: var(--primary-400);
    --chart-4: var(--primary-300);
    --chart-5: var(--primary-100);
    --sidebar: hsl(0 0% 100%);
    --sidebar-foreground: var(--base-800);
    --sidebar-primary: var(--primary-600);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: var(--base-50);
    --sidebar-accent-foreground: var(--base-800);
    --sidebar-border: var(--base-200);
    --sidebar-ring: var(--primary-600);

    --radius: 0.75rem;
    --radius-xl: calc(var(--radius) + 4px);
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --animation-accordion-down: accordion-down 0.2s ease-out;
    --animation-accordion-up: accordion-up 0.2s ease-out;
    --animation-collapsible-down: collapsible-down 0.2s ease-in-out;
    --animation-collapsible-up: collapsible-up 0.2s ease-in-out;
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    --display-weight: 700;
    --text-weight: 400;

    --usage-low: 142 71% 45%;
    --usage-mid: 48 96% 53%;
    --usage-high: 0 72% 51%;
    /* new Theme */
    /* light */
    /* color */
    --bg-accent: hsl(0 0 15% / 0.05);
    --bg-window-background: hsl(0 0 100% / 0.5);
    --bg-background-70: hsl(0 0 100% / 0.7);
    --bg-card: hsl(0 0 100%);
    --bg-primary: hsl(210 100% 43%);
    --bg-primary-70: hsl(210 100% 43% / 0.7);
    --bg-primary-700: hsl(210 100% 37%);
    --border: hsl(0 0 0% / 0.05);
    --border-window-outside: hsl(0 0 21% / 0.25);
    --shadow-card: hsl(0 0 0% / 0.1);
    --syntax-bold: hsl(227 76% 41%);
    --syntax-comment: hsl(218 12% 64%);
    --syntax-const: hsl(176 100% 24%);
    --syntax-property: hsl(221 97% 54%);
    --syntax-symbol: hsl(0 0 15%);
    --syntax-variable: var(--color-blue-800);
    --text-accent-foreground: hsl(0 0 15% / 0.8);
    --text-foreground: hsl(0 0% 14%);
    --text-green: hsl(142 71% 45%);
    --text-muted-foreground: hsl(0 0 15% / 0.2);
    --text-primary: hsl(210 100% 43%);
    --text-primary-foreground: hsl(0 0 100%);
    --text-red: hsl(0 73% 58%);
    --text-secondary-foreground: hsl(0 0 15% / 0.5);
    --text-skeleton-primary: hsl(0 0 15% / 0.05);
    --window-inner-border: hsl(0 0 100% / 0.5);
  }

  html {
    --dc-font-scale: 1;
  }

  html.text-sm {
    --dc-font-scale: 0.875;
  }

  html.text-base {
    --dc-font-scale: 1;
  }

  html.text-lg {
    --dc-font-scale: 1.125;
  }

  html.text-xl {
    --dc-font-scale: 1.25;
  }

  html.text-2xl {
    --dc-font-scale: 1.5;
  }

  .dark,
  [data-theme='dark'] {
    --container: var(--black);
    --background: hsl(0 0 15% / 1);
    --foreground: var(--base-200);
    --card: hsl(0 0 20% / 1);
    --card-foreground: var(--base-200);
    --popover: hsl(0 0 20% / 1);
    --popover-foreground: hsl(0 0 100%);
    --secondary: hsl(0 0 15% / 0.8);
    --secondary-foreground: var(--base-50);
    --muted: hsl(0 0 100% / 0.03);
    --muted-foreground: hsl(0 0 100% / 0.5);
    --accent: hsl(0 0 100% / 0.05);
    --accent-foreground: hsl(0 0 100% / 0.8);
    --destructive: hsl(0 62.8% 30.6%);
    --border: var(--base-800);
    --input: var(--base-700);
    --sidebar: var(--base-900);
    --sidebar-foreground: var(--base-200);
    --sidebar-accent: var(--base-800);
    --sidebar-accent-foreground: var(--base-200);
    --sidebar-border: var(--base-800);

    --usage-low: 142 40% 60%;
    --usage-mid: 48 80% 60%;
    --usage-high: 0 70% 65%;

    /* dark */
    /* color */
    --bg-accent: hsl(0 0 100% / 0.05);
    --bg-window-background: hsl(0 0 10% / 0.5);
    --bg-background-70: hsl(0 0 15% / 0.7);

    --bg-muted: hsl(0 0 100% / 0.03);
    --bg-primary: hsl(210 100% 43%);
    --bg-primary-70: hsl(210 100% 43% / 0.7);
    --bg-primary-700: hsl(210 100% 37%);
    --border: hsl(0 0 100% / 0.05);
    --border-window-outside: hsl(0 0 0% / 0.4);
    --shadow-card: hsl(0 0 0% / 0.4);
    --syntax-bold: var(--color-blue-500);
    --syntax-comment: var(--color-gray-400);
    --syntax-const: var(--color-emerald-300);
    --syntax-property: var(--color-blue-100);
    --syntax-symbol: hsl(0 0 100% / 0.8);
    --syntax-variable: var(--color-blue-300);
    --text-foreground: hsl(0 0 100%);
    --text-green: hsl(142 71% 45%);
    --text-muted-foreground: hsl(0 0 100% / 0.2);
    --text-primary: hsl(210 100% 43%);
    --text-primary-foreground: hsl(0 0 100%);
    --text-red: hsl(0 73% 58%);
    --text-secondary-foreground: hsl(0 0 100% / 0.5);
    --text-skeleton-primary: hsl(0 0 100% / 0.05);
    --window-inner-border: hsl(0 0 100% / 0.15);
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.dark):not([data-theme='light']):not([data-theme='dark']) {
      --container: var(--black);
      --background: hsl(0 0 15% / 1);
      --foreground: hsl(0 0 100%);
      --card: hsl(0 0 20% / 1);
      --card-foreground: hsl(0 0 100%);
      --popover: hsl(0 0 20% / 1);
      --popover-foreground: hsl(0 0 100%);
      --secondary: hsl(0 0 15% / 0.8);
      --secondary-foreground: hsl(0 0 100%);
      --muted: hsl(0 0 100% / 0.03);
      --muted-foreground: hsl(0 0 100% / 0.5);
      --accent: hsl(0 0 100% / 0.05);
      --accent-foreground: hsl(0 0 100% / 0.8);
      --destructive: hsl(0 62.8% 30.6%);

      --border: hsl(0 0 100% / 0.05);
      --input: var(--base-700);
      --sidebar: var(--base-900);
      --sidebar-foreground: var(--base-200);
      --sidebar-accent: var(--base-800);
      --sidebar-accent-foreground: var(--base-200);
      --sidebar-border: var(--base-800);

      --usage-low: 142 40% 60%;
      --usage-mid: 48 80% 60%;
      --usage-high: 0 70% 65%;
      --color-zinc-50: var(--zinc-50);
      --color-zinc-100: var(--zinc-100);
      --color-zinc-200: var(--zinc-200);
      --color-zinc-300: var(--zinc-300);
      --color-zinc-400: var(--zinc-400);
      --color-zinc-500: var(--zinc-500);
      --color-zinc-600: var(--zinc-600);
      --color-zinc-700: var(--zinc-700);
      --color-zinc-800: var(--zinc-800);
      --color-zinc-900: var(--zinc-900);
      --color-zinc-950: var(--zinc-950);

      /* dark */
      /* color */
      --bg-accent: hsl(0 0 100% / 0.05);
      --bg-background-70: hsl(0 0 15% / 0.7);
      --bg-card: hsl(217 6% 15%);
      --bg-muted: hsl(0 0 100% / 0.03);
      --bg-primary: hsl(210 100% 43%);
      --bg-primary-70: hsl(210 100% 43% / 0.7);
      --bg-primary-700: hsl(210 100% 37%);
      --bg-window-background: hsl(0 0 10% / 0.5);
      --border-window-outside: hsl(0 0 0% / 0.4);
      --shadow-card: hsl(0 0 0% / 0.4);
      --syntax-bold: var(--color-blue-500);
      --syntax-comment: var(--color-gray-400);
      --syntax-const: var(--color-emerald-300);
      --syntax-property: var(--color-blue-100);
      --syntax-symbol: hsl(0 0 100% / 0.8);
      --syntax-variable: var(--color-blue-300);
      --text-accent-foreground: hsl(0 0 100% / 0.8);
      --text-foreground: hsl(0 0 100%);
      --text-green: hsl(142 71% 45%);
      --text-muted-foreground: hsl(0 0 100% / 0.2);
      --text-primary: hsl(210 100% 43%);
      --text-primary-foreground: hsl(0 0 100%);
      --text-red: hsl(0 73% 58%);
      --text-secondary-foreground: hsl(0 0 100% / 0.5);
      --text-skeleton-primary: hsl(0 0 100% / 0.05);
      --window-inner-border: hsl(0 0 100% / 0.15);
    }
  }

  @theme inline {
    --container-center: true;
    --container-padding: 2rem;
    --container-max-2xl: 1400px;

    --color-base-50: var(--base-50);
    --color-base-100: var(--base-100);
    --color-base-200: var(--base-200);
    --color-base-300: var(--base-300);
    --color-base-400: var(--base-400);
    --color-base-500: var(--base-500);
    --color-base-600: var(--base-600);
    --color-base-700: var(--base-700);
    --color-base-800: var(--base-800);
    --color-base-900: var(--base-900);
    --color-base-950: var(--base-950);
    --color-base-1000: var(--base-1000);

    --color-primary-50: var(--primary-50);
    --color-primary-100: var(--primary-100);
    --color-primary-200: var(--primary-200);
    --color-primary-300: var(--primary-300);
    --color-primary-400: var(--primary-400);
    --color-primary-500: var(--primary-500);
    --color-primary-600: var(--primary-600);
    --color-primary-700: var(--primary-700);
    --color-primary-800: var(--primary-800);
    --color-primary-900: var(--primary-900);
    --color-primary-950: var(--primary-950);
    --color-primary-1000: var(--primary-1000);

    --color-white: var(--white);
    --color-black: var(--black);
    --color-zinc-50: var(--zinc-50);
    --color-zinc-100: var(--zinc-100);
    --color-zinc-200: var(--zinc-200);
    --color-zinc-300: var(--zinc-300);
    --color-zinc-400: var(--zinc-400);
    --color-zinc-500: var(--zinc-500);
    --color-zinc-600: var(--zinc-600);
    --color-zinc-700: var(--zinc-700);
    --color-zinc-800: var(--zinc-800);
    --color-zinc-900: var(--zinc-900);
    --color-zinc-950: var(--zinc-950);

    --color-container: var(--container);
    --color-background: var(--background);
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    /* --color-card: var(--card); */
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-usage-low: var(--usage-low);
    --color-usage-mid: var(--usage-mid);
    --color-usage-high: var(--usage-high);
    --color-window-background: var(--bg-window-background);
    --color-window-inner-border: var(--window-inner-border);
    --color-bg-background-70: var(--bg-background-70);
    --color-text-secondary-foreground: var(--text-secondary-foreground);

    --animate-accordion-down: var(--animation-accordion-down);
    --animate-accordion-up: var(--animation-accordion-up);
    --animate-collapsible-down: var(--animation-collapsible-down);
    --animate-collapsible-up: var(--animation-collapsible-up);
    --animate-pulse: var(--animation-pulse);

    --radius-xl: calc(var(--radius) + 4px);
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);
    /* new theme*/
    /* Default */
    /* color */
    --color-black: hsl(0 0 0%);
    --color-transparent: hsl(0 0 100% / 0);
    --color-white: hsl(0 0 100%);
    --color-amber-100: hsl(48 97% 89%);
    --color-amber-200: hsl(48 98% 76%);
    --color-amber-300: hsl(47 100% 59%);
    --color-amber-400: hsl(44 100% 50%);
    --color-amber-50: hsl(48 100% 96%);
    --color-amber-500: hsl(37 100% 50%);
    --color-amber-600: hsl(30 100% 44%);
    --color-amber-700: hsl(25 100% 37%);
    --color-amber-800: hsl(24 100% 30%);
    --color-amber-900: hsl(23 91% 25%);
    --color-amber-950: hsl(21 97% 14%);
    --color-blue-100: hsl(214 95% 93%);
    --color-blue-200: hsl(213 100% 87%);
    --color-blue-300: hsl(211 100% 78%);
    --color-blue-400: hsl(212 100% 66%);
    --color-blue-50: hsl(214 100% 97%);
    --color-blue-500: hsl(216 100% 58%);
    --color-blue-600: hsl(221 97% 54%);
    --color-blue-700: hsl(225 84% 49%);
    --color-blue-800: hsl(227 76% 41%);
    --color-blue-900: hsl(225 67% 33%);
    --color-blue-950: hsl(227 59% 21%);
    --color-cyan-100: hsl(185 96% 90%);
    --color-cyan-200: hsl(186 96% 81%);
    --color-cyan-300: hsl(187 98% 66%);
    --color-cyan-400: hsl(188 100% 47%);
    --color-cyan-50: hsl(183 100% 96%);
    --color-cyan-500: hsl(190 100% 43%);
    --color-cyan-600: hsl(192 100% 36%);
    --color-cyan-700: hsl(193 100% 29%);
    --color-cyan-800: hsl(192 100% 24%);
    --color-cyan-900: hsl(196 72% 23%);
    --color-cyan-950: hsl(197 86% 15%);
    --color-emerald-100: hsl(150 81% 90%);
    --color-emerald-200: hsl(152 78% 80%);
    --color-emerald-300: hsl(158 76% 64%);
    --color-emerald-400: hsl(161 100% 42%);
    --color-emerald-50: hsl(152 81% 96%);
    --color-emerald-500: hsl(160 100% 37%);
    --color-emerald-600: hsl(160 100% 30%);
    --color-emerald-700: hsl(162 100% 24%);
    --color-emerald-800: hsl(163 100% 19%);
    --color-emerald-900: hsl(165 100% 15%);
    --color-emerald-950: hsl(166 91% 9%);
    --color-fuchsia-100: hsl(287 100% 95%);
    --color-fuchsia-200: hsl(289 100% 91%);
    --color-fuchsia-300: hsl(292 100% 83%);
    --color-fuchsia-400: hsl(293 100% 71%);
    --color-fuchsia-50: hsl(289 100% 98%);
    --color-fuchsia-500: hsl(293 96% 57%);
    --color-fuchsia-600: hsl(294 100% 44%);
    --color-fuchsia-700: hsl(295 100% 36%);
    --color-fuchsia-800: hsl(296 99% 29%);
    --color-fuchsia-900: hsl(296 73% 27%);
    --color-fuchsia-950: hsl(297 100% 15%);
    --color-gray-100: hsl(220 14% 96%);
    --color-gray-200: hsl(220 13% 91%);
    --color-gray-300: hsl(218 14% 84%);
    --color-gray-400: hsl(218 12% 64%);
    --color-gray-50: hsl(210 20% 98%);
    --color-gray-500: hsl(220 10% 46%);
    --color-gray-600: hsl(216 15% 34%);
    --color-gray-700: hsl(217 21% 27%);
    --color-gray-800: hsl(216 31% 17%);
    --color-gray-900: hsl(220 43% 11%);
    --color-gray-950: hsl(224 71% 4%);
    --color-green-100: hsl(141 84% 93%);
    --color-green-200: hsl(141 82% 85%);
    --color-green-300: hsl(143 81% 71%);
    --color-green-400: hsl(150 96% 45%);
    --color-green-50: hsl(138 76% 97%);
    --color-green-500: hsl(144 100% 39%);
    --color-green-600: hsl(142 100% 33%);
    --color-green-700: hsl(145 100% 25%);
    --color-green-800: hsl(148 98% 20%);
    --color-green-900: hsl(145 73% 19%);
    --color-green-950: hsl(145 80% 10%);
    --color-indigo-100: hsl(226 100% 94%);
    --color-indigo-200: hsl(227 100% 89%);
    --color-indigo-300: hsl(230 100% 82%);
    --color-indigo-400: hsl(235 100% 74%);
    --color-indigo-50: hsl(226 100% 97%);
    --color-indigo-500: hsl(241 100% 69%);
    --color-indigo-600: hsl(247 91% 59%);
    --color-indigo-700: hsl(248 68% 51%);
    --color-indigo-800: hsl(246 61% 42%);
    --color-indigo-900: hsl(243 50% 35%);
    --color-indigo-950: hsl(245 50% 20%);
    --color-lime-100: hsl(79 89% 89%);
    --color-lime-200: hsl(81 89% 79%);
    --color-lime-300: hsl(81 88% 64%);
    --color-lime-400: hsl(80 100% 45%);
    --color-lime-50: hsl(78 92% 95%);
    --color-lime-500: hsl(84 100% 41%);
    --color-lime-600: hsl(86 100% 32%);
    --color-lime-700: hsl(85 100% 25%);
    --color-lime-800: hsl(83 100% 19%);
    --color-lime-900: hsl(86 71% 19%);
    --color-lime-950: hsl(89 88% 10%);
    --color-neutral-100: hsl(0 0 96%);
    --color-neutral-200: hsl(0 0 90%);
    --color-neutral-300: hsl(0 0 83%);
    --color-neutral-400: hsl(0 0 63%);
    --color-neutral-50: hsl(0 0 98%);
    --color-neutral-500: hsl(0 0 45%);
    --color-neutral-600: hsl(0 0 32%);
    --color-neutral-700: hsl(0 0 25%);
    --color-neutral-800: hsl(0 0 15%);
    --color-neutral-900: hsl(0 0 9%);
    --color-neutral-950: hsl(0 0 4%);
    --color-orange-100: hsl(35 100% 92%);
    --color-orange-200: hsl(32 100% 83%);
    --color-orange-300: hsl(31 100% 71%);
    --color-orange-400: hsl(32 100% 51%);
    --color-orange-50: hsl(33 100% 96%);
    --color-orange-500: hsl(25 100% 50%);
    --color-orange-600: hsl(18 100% 48%);
    --color-orange-700: hsl(16 100% 40%);
    --color-orange-800: hsl(17 100% 31%);
    --color-orange-900: hsl(16 83% 27%);
    --color-orange-950: hsl(13 84% 15%);
    --color-pink-100: hsl(326 78% 95%);
    --color-pink-200: hsl(326 88% 90%);
    --color-pink-300: hsl(327 96% 82%);
    --color-pink-400: hsl(327 95% 69%);
    --color-pink-50: hsl(327 73% 97%);
    --color-pink-500: hsl(328 92% 58%);
    --color-pink-600: hsl(329 100% 45%);
    --color-pink-700: hsl(332 100% 39%);
    --color-pink-800: hsl(332 100% 32%);
    --color-pink-900: hsl(334 79% 29%);
    --color-pink-950: hsl(335 91% 17%);
    --color-purple-100: hsl(269 100% 95%);
    --color-purple-200: hsl(269 100% 92%);
    --color-purple-300: hsl(271 100% 85%);
    --color-purple-400: hsl(272 100% 74%);
    --color-purple-50: hsl(270 100% 98%);
    --color-purple-500: hsl(273 100% 64%);
    --color-purple-600: hsl(275 96% 52%);
    --color-purple-700: hsl(276 100% 43%);
    --color-purple-800: hsl(275 82% 38%);
    --color-purple-900: hsl(274 73% 32%);
    --color-purple-950: hsl(275 94% 21%);
    --color-red-100: hsl(0 100% 94%);
    --color-red-200: hsl(0 100% 89%);
    --color-red-300: hsl(0 100% 82%);
    --color-red-400: hsl(359 100% 70%);
    --color-red-50: hsl(0 86% 97%);
    --color-red-500: hsl(357 96% 58%);
    --color-red-600: hsl(357 100% 45%);
    --color-red-700: hsl(358 100% 38%);
    --color-red-800: hsl(356 92% 33%);
    --color-red-900: hsl(359 69% 30%);
    --color-red-950: hsl(359 79% 15%);
    --color-rose-100: hsl(356 100% 95%);
    --color-rose-200: hsl(352 100% 90%);
    --color-rose-300: hsl(352 100% 82%);
    --color-rose-400: hsl(350 100% 69%);
    --color-rose-50: hsl(356 100% 97%);
    --color-rose-500: hsl(345 100% 56%);
    --color-rose-600: hsl(344 100% 46%);
    --color-rose-700: hsl(344 100% 39%);
    --color-rose-800: hsl(340 100% 32%);
    --color-rose-900: hsl(339 89% 29%);
    --color-rose-950: hsl(342 95% 15%);
    --color-sky-100: hsl(203 94% 94%);
    --color-sky-200: hsl(201 97% 86%);
    --color-sky-300: hsl(199 100% 73%);
    --color-sky-400: hsl(196 100% 50%);
    --color-sky-50: hsl(204 100% 97%);
    --color-sky-500: hsl(199 100% 48%);
    --color-sky-600: hsl(202 100% 41%);
    --color-sky-700: hsl(203 100% 33%);
    --color-sky-800: hsl(201 100% 27%);
    --color-sky-900: hsl(201 96% 22%);
    --color-sky-950: hsl(203 87% 15%);
    --color-slate-100: hsl(210 40% 96%);
    --color-slate-200: hsl(214 32% 91%);
    --color-slate-300: hsl(213 29% 84%);
    --color-slate-400: hsl(215 23% 65%);
    --color-slate-50: hsl(210 40% 98%);
    --color-slate-500: hsl(215 18% 47%);
    --color-slate-600: hsl(215 22% 35%);
    --color-slate-700: hsl(215 28% 27%);
    --color-slate-800: hsl(217 36% 18%);
    --color-slate-900: hsl(223 48% 11%);
    --color-slate-950: hsl(229 85% 5%);
    --color-stone-100: hsl(60 5% 96%);
    --color-stone-200: hsl(20 6% 90%);
    --color-stone-300: hsl(24 6% 83%);
    --color-stone-400: hsl(27 6% 63%);
    --color-stone-50: hsl(60 9% 98%);
    --color-stone-500: hsl(26 6% 45%);
    --color-stone-600: hsl(36 6% 32%);
    --color-stone-700: hsl(33 7% 25%);
    --color-stone-800: hsl(12 6% 15%);
    --color-stone-900: hsl(24 10% 10%);
    --color-stone-950: hsl(20 14% 4%);
    --color-teal-100: hsl(167 86% 89%);
    --color-teal-200: hsl(168 86% 78%);
    --color-teal-300: hsl(172 81% 60%);
    --color-teal-400: hsl(174 100% 42%);
    --color-teal-50: hsl(166 76% 97%);
    --color-teal-500: hsl(174 100% 37%);
    --color-teal-600: hsl(175 100% 29%);
    --color-teal-700: hsl(176 100% 24%);
    --color-teal-800: hsl(177 100% 19%);
    --color-teal-900: hsl(176 76% 18%);
    --color-teal-950: hsl(179 92% 10%);
    --color-violet-100: hsl(251 91% 95%);
    --color-violet-200: hsl(250 100% 92%);
    --color-violet-300: hsl(253 100% 85%);
    --color-violet-400: hsl(257 100% 76%);
    --color-violet-50: hsl(250 100% 98%);
    --color-violet-500: hsl(261 100% 66%);
    --color-violet-600: hsl(265 99% 56%);
    --color-violet-700: hsl(268 93% 47%);
    --color-violet-800: hsl(267 86% 40%);
    --color-violet-900: hsl(265 74% 35%);
    --color-violet-950: hsl(261 73% 23%);
    --color-yellow-100: hsl(55 97% 88%);
    --color-yellow-200: hsl(53 100% 76%);
    --color-yellow-300: hsl(51 100% 56%);
    --color-yellow-400: hsl(48 100% 49%);
    --color-yellow-50: hsl(55 92% 95%);
    --color-yellow-500: hsl(44 100% 47%);
    --color-yellow-600: hsl(39 100% 41%);
    --color-yellow-700: hsl(34 100% 33%);
    --color-yellow-800: hsl(33 100% 27%);
    --color-yellow-900: hsl(30 84% 25%);
    --color-yellow-950: hsl(27 89% 14%);
    --color-zinc-100: hsl(240 5% 96%);
    --color-zinc-200: hsl(240 6% 90%);
    --color-zinc-300: hsl(240 5% 84%);
    --color-zinc-400: hsl(240 5% 64%);
    --color-zinc-50: hsl(0 0 98%);
    --color-zinc-500: hsl(240 4% 46%);
    --color-zinc-600: hsl(240 6% 34%);
    --color-zinc-700: hsl(240 5% 26%);
    --color-zinc-800: hsl(240 4% 16%);
    --color-zinc-900: hsl(240 6% 10%);
    --color-zinc-950: hsl(240 10% 4%);
    --theme-accent: var(--color-slate-100);
    --theme-accent-foreground: var(--color-slate-900);
    --theme-background: var(--color-white);
    --theme-border: var(--color-slate-200);
    --theme-card: var(--color-white);
    --theme-card-foreground: var(--color-slate-950);
    --theme-chart-1: hsl(12 76% 61%);
    --theme-chart-2: hsl(173 58% 39%);
    --theme-chart-3: hsl(197 37% 24%);
    --theme-chart-4: hsl(43 74% 66%);
    --theme-chart-5: hsl(27 87% 67%);
    --theme-destructive: var(--color-red-600);
    --theme-destructive-foreground: var(--color-slate-50);
    --theme-foreground: var(--color-slate-950);
    --theme-input: var(--color-slate-200);
    --theme-muted: var(--color-slate-100);
    --theme-muted-foreground: var(--color-slate-500);
    --theme-popover: var(--color-white);
    --theme-popover-foreground: var(--color-slate-950);
    --theme-primary: var(--color-blue-600);
    --theme-primary-foreground: var(--color-slate-50);
    --theme-ring: var(--color-slate-950);
    --theme-secondary: var(--color-slate-100);
    --theme-secondary-foreground: var(--color-slate-900);
    --theme-sidebar-accent: var(--color-slate-100);
    --theme-sidebar-accent-foreground: var(--color-slate-900);
    --theme-sidebar-background: var(--color-slate-50);
    --theme-sidebar-border: var(--theme-border);
    --theme-sidebar-foreground: var(--color-slate-700);
    --theme-sidebar-primary: var(--color-slate-900);
    --theme-sidebar-primary-foreground: var(--color-slate-50);
    --theme-sidebar-ring: var(--theme-primary);
    /* number */
    --blur-none: 0px;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --border-width-0: 0px;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --container-0: 0px;
    --container-3xs: 256px;
    --container-2xs: 288px;
    --container-xs: 320px;
    --container-sm: 384px;
    --container-md: 448px;
    --container-lg: 512px;
    --container-xl: 576px;
    --container-2xl: 672px;
    --container-3xl: 768px;
    --container-4xl: 896px;
    --container-5xl: 1024px;
    --container-6xl: 1152px;
    --container-7xl: 1280px;
    --font-leading-3: 12px;
    --font-leading-4: 16px;
    --font-leading-5: 20px;
    --font-leading-6: 24px;
    --font-leading-7: 28px;
    --font-leading-8: 32px;
    --font-leading-9: 36px;
    --font-leading-10: 40px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;
    --font-size-7xl: 72px;
    --font-size-8xl: 96px;
    --font-size-9xl: 128px;
    --font-tracking-tighter: -0.800000011920929px;
    --font-tracking-tight: -0.4000000059604645px;
    --font-tracking-normal: 0px;
    --font-tracking-wide: 0.4000000059604645px;
    --font-tracking-wider: 0.800000011920929px;
    --font-tracking-widest: 1.600000023841858px;
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --opacity-0: 0%;
    --opacity-5: 5%;
    --opacity-10: 10%;
    --opacity-15: 15%;
    --opacity-20: 20%;
    --opacity-25: 25%;
    --opacity-30: 30%;
    --opacity-35: 35%;
    --opacity-40: 40%;
    --opacity-45: 45%;
    --opacity-50: 50%;
    --opacity-55: 55%;
    --opacity-60: 60%;
    --opacity-65: 65%;
    --opacity-70: 70%;
    --opacity-75: 75%;
    --opacity-80: 80%;
    --opacity-85: 85%;
    --opacity-90: 90%;
    --opacity-95: 95%;
    --opacity-100: 100%;
    --radius-none: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --radius-4xl: 32px;
    --radius-full: 9999px;
    --skew-0: 0px;
    --skew-1: 1px;
    --skew-2: 2px;
    --skew-3: 3px;
    --skew-6: 6px;
    --skew-12: 12px;
    --spacing-0: 0px;
    --spacing-px: 1px;
    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-2-5: 10px;
    --spacing-3: 12px;
    --spacing-3-5: 14px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-14: 56px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-28: 112px;
    --spacing-32: 128px;
    --spacing-36: 144px;
    --spacing-40: 160px;
    --spacing-44: 176px;
    --spacing-48: 192px;
    --spacing-52: 208px;
    --spacing-56: 224px;
    --spacing-60: 240px;
    --spacing-64: 256px;
    --spacing-72: 288px;
    --spacing-80: 320px;
    --spacing-96: 384px;
    --theme-radius: var(--radius-lg);
  }

  * {
    border-color: var(--border);
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  }

  body {
    /* background-color: var(--background); */
    color: var(--foreground);
    font-weight: var(--text-weight);
  }

  html {
    font-family:
      'Geist',
      Noto Sans,
      ui-sans-serif,
      system-ui,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji';
  }

  @font-face {
    font-family: 'Geist';
    src: url('./geist.ttf') format('truetype');
  }
}

@layer utilities {
  [data-slot='switch'] {
    inline-size: calc(2rem / var(--dc-font-scale));
    block-size: calc(1.15rem / var(--dc-font-scale));
    min-inline-size: calc(2rem / var(--dc-font-scale));
    min-block-size: calc(1.15rem / var(--dc-font-scale));
    width: calc(2rem / var(--dc-font-scale));
    height: calc(1.15rem / var(--dc-font-scale));
    min-width: calc(2rem / var(--dc-font-scale));
    min-height: calc(1.15rem / var(--dc-font-scale));
  }

  [data-slot='switch-thumb'] {
    inline-size: calc(1rem / var(--dc-font-scale));
    block-size: calc(1rem / var(--dc-font-scale));
    width: calc(1rem / var(--dc-font-scale));
    height: calc(1rem / var(--dc-font-scale));
  }
}

@layer components {
  .loading-shimmer,
  .loading-shimmer-pure-text {
    --shimmer-text-secondary: var(--text-secondary-foreground, rgba(37, 37, 37, 0.5));
    --shimmer-contrast: color-mix(
      in srgb,
      var(--text-primary-foreground, #ffffff) 70%,
      transparent
    );
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: var(--shimmer-text-secondary)
      linear-gradient(
        to right,
        var(--shimmer-text-secondary) 0,
        var(--shimmer-contrast) 40%,
        var(--shimmer-contrast) 60%,
        var(--shimmer-text-secondary) 100%
      );
    background-repeat: no-repeat;
    background-size: 50% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;
    animation: loading-shimmer var(--cot-shimmer-duration, 1.6s) linear infinite;
  }
}

@supports not (color: color-mix(in srgb, #fff 70%, transparent)) {
  @layer components {
    .loading-shimmer,
    .loading-shimmer-pure-text {
      --shimmer-contrast: rgba(255, 255, 255, 0.75);
    }
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }

  to {
    height: var(--reka-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--reka-accordion-content-height);
  }

  to {
    height: 0;
  }
}

@keyframes collapsible-down {
  from {
    height: 0;
  }

  to {
    height: var(--reka-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--reka-collapsible-content-height);
  }

  to {
    height: 0;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes loading-shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@layer utilities {
  .font-display {
    font-weight: var(--display-weight);
  }

  .font-text {
    font-weight: var(--text-weight);
  }
}
